<template>
  <div>

    <v-layout :class="{'MyTravel-form-tabs':isActive}">
      <v-tabs>
        <v-tab>
          <label>Draft</label>
          <p>9</p>
        </v-tab>
        <v-tab>
          <label>Pending</label>
          <p>6</p>
        </v-tab>
        <v-tab>
          <label>History</label>
        </v-tab>
        <!--Draft begin-->

        <v-tab-item>
          <v-dialog v-model="dialog"
                    width="48%">
            <v-card>
              <v-card-title class="headline grey lighten-5">
                New OOT Request
              </v-card-title>
            </v-card>
            <v-card-text>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry’s standard
                dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                a type specimen book.</p>
            </v-card-text>
            <v-card-actions>
              <v-btn :class="{'Confirmed-btn':isActive}"
                     color="primary"
                     text
                     @click="dialog = false">
                Confirmed
              </v-btn>
            </v-card-actions>
          </v-dialog>
          <v-btn :class="{'NewTravelt-btn':isActive}"
                 depressed
                 @click="GenerateTraveAllowance()">New travel allowance request
          </v-btn>
          <v-data-table
            :headers="headers"
            :items="desserts"
            :loading="loading"
            :options.sync="options"
            :server-items-length="totalDesserts"
            class="elevation-1 table form-table MyTravel-form-table">
            <template v-slot:item.requestNo="{ item }">
              <a @click="skip(item)">{{ item.requestNo }}</a>
            </template>

          </v-data-table>
        </v-tab-item>
        <v-tab-item>
          <!--          <v-data-table :disable-sort="true"-->
          <!--                        :headers="headers"-->
          <!--                        :hide-default-footer='true'-->
          <!--                        :items="desserts"-->
          <!--                        :items-per-page="1000"-->
          <!--                        class="table form-table MyTravel-form-table">-->

          <!--          </v-data-table>-->
        </v-tab-item>
        <!--Pending end-->

        <!--History begin-->
        <v-tab-item>
          <v-layout :class="{'pending-form-info':isActive}">
            <v-flex>
              <label>Request No:</label>
              <v-text-field placeholder="Placeholder"></v-text-field>
            </v-flex>
            <v-flex>

              <label>Request status:</label>
              <v-select :items="items"></v-select>
            </v-flex>
            <v-flex>
              <label>Check-in date from:</label>
              <v-menu v-model="menu1"
                      :close-on-content-click="false"
                      :nudge-right="40"
                      min-width="290px"
                      offset-y
                      transition="scale-transition">
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field v-model="search.checkOutDate"
                                v-bind="attrs"
                                v-on="on"
                                readonly></v-text-field>
                </template>
                <v-date-picker v-model="search.checkOutDate"
                               @input="menu1 = false"></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex>
              <label>Check-out date to:</label>
              <v-menu v-model="menu"
                      :close-on-content-click="false"
                      :nudge-right="40"
                      min-width="200px"
                      offset-y
                      transition="scale-transition">
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field v-model="search.checkInDate"
                                v-bind="attrs"
                                v-on="on"
                                readonly></v-text-field>
                </template>
                <v-date-picker v-model="search.checkInDate"
                               @input="menu = false"></v-date-picker>
              </v-menu>

            </v-flex>
            <v-flex>
            </v-flex>
            <v-flex :class="{'pending-form-btns':isActive}"
                    style="padding-top: 10px;">
              <v-btn :class="{'Search-btn':isActive}">
                Search
              </v-btn>
              <v-btn :class="{'Reset-btn':isActive}">
                Reset
              </v-btn>
            </v-flex>
          </v-layout>

          <!--          <v-data-table :disable-sort="true"-->
          <!--                        :headers="headers"-->
          <!--                        :hide-default-footer='true'-->
          <!--                        :items="desserts"-->
          <!--                        :items-per-page="1000"-->
          <!--                        class="table form-table MyTravel-form-table">-->
          <!--          </v-data-table>-->
        </v-tab-item>
      </v-tabs>
    </v-layout>
    <loading :isLoading="isLoading"></loading>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {GetTraveAllowanceList,GenerateTraveAllowance} from "../../request/index";
import {loading} from '@/components/loading'

import {mapState} from "vuex";
import {Watch,Component} from "vue-property-decorator";

@Component({
  computed: {
    ...mapState({
      userinfo: (state: any) => state.login.userinfo,
    }),
  },
  components: {
    loading
  },
})
export default class APP extends Vue {
  isLoading:boolean = false
  search: object = {};
  menu: boolean = false;
  menu1: boolean = false;
  menu3: boolean = false;
  menu2: boolean = false;
  requestStatus: string[] = ["Draft"];
  dialog: boolean = true;
  cruds: string[] = ["Create", "Read", "Update", "Delete"];
  totalDesserts: number = 0
  options: any = {}
  loading: boolean = true
  headers: object[] = [
    {text: "Request No.", value: "requestNo"},
    {text: "Evidence from.", value: "evidenceFrom"},
    {text: "Request status", value: "expStatus"},
    {text: "Client - job - office", value: "jobProjectDesc"},
    {text: "Territory", value: "territory"},
    {text: "Province", value: "province"},
    {text: "Accomodation city", value: "accomodationCity"},
    {text: "Hotel name", value: "hotelName"},
    {text: "Check-in date (DD/MM/YYYY)", value: "checkInDate"},
    {text: "Check-out date (DD/MM/YYYY)", value: "checkOutDate"},
    {text: "No. of nights", value: "noOfNights"},
    {text: "Daily travel allowance amount (RMB)", value: "dailyAmount"},
    {text: "Total travel allowance amount (RMB)", value: "totalAmount"},
    {text: "Creation date (DD/MM/YYYY)", value: "creationDate"},
  ];
  items: string[] = ["1", "2", "3", "4"];
  isActive: boolean = true;

  desserts: object[] = [];
//   watch: {
//     options: {
//       handler () {
//       this.getDataFromApi()
//     },
//     deep: true,
//   },
// }
  @Watch('options', {deep: true})
  onOptionsChange() {
    this.GetTravelallowanceList({})
  }

  GetTravelallowanceList(data: any) {
    const {sortBy, sortDesc, page, itemsPerPage} = this.options
    data.PageIndex = page
    data.PageSize = itemsPerPage
    if (data.PageIndex != undefined) {
      GetTraveAllowanceList(data).then((res: any) => {
        this.loading = false;
        console.log(res)
        if (res.data) {
          console.log(res.data)
          res.data.list.filter((x: any) => {
            x.creationDate = this.$options.filters["formattingDate"](
              x.creationDate
            );
            if (x.checkInDate != null)
              x.checkInDate.indexOf("0001-01-01") > -1
                ? (x.checkInDate = null)
                : (x.checkInDate = this.$options.filters["formattingDate"](
                x.checkInDate
                ));
            if (x.checkOutDate != null)
              x.checkOutDate.indexOf("0001-01-01") > -1
                ? (x.checkOutDate = null)
                : (x.checkOutDate = this.$options.filters["formattingDate"](
                x.checkOutDate
                ));
          });

          this.totalDesserts = res.data.totalCount;

          this.desserts = res.data.list;
          // if (itemsPerPage > 0) {
          //   this.desserts = this.desserts.slice((page - 1) * itemsPerPage, page * itemsPerPage)
          // }
        }
      });
    }

  }

  GenerateTraveAllowance() {
    this.isLoading = true;
    var model = new URLSearchParams();
    model.append("staffId", this.userinfo.userID);
    GenerateTraveAllowance(model).then((res) => {
      if (res.data) {
        const {href} = this.$router.resolve({
          path: "/NewTravelAllowanceRequest/" + res.data.id,
          params: {
            id: 0,
          },
        });
        this.isLoading = false;
        window.open(href, "_blank");
      }
    });
  }

  skip(item: any) {
    const {href} = this.$router.resolve({
      path: "/NewTravelAllowanceRequest/" + item.id,
      params: {
        id: 0,
      },
    });
    window.open(href, "_blank");
  }
}
</script>
